<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="flow.css">
    <script type="text/montage-serialization">
        {
            "repetition": {
                "prototype": "ui/repetition.reel",
                "values": {
                    "element": {
                        "#": "montage-flow-repetition"
                    },
                    "isSelectionEnabled": {"<-": "@owner.isSelectionEnabled"},
                    "allowsMultipleSelection": {"<-": "@owner.allowsMultipleSelection"},
                    "visibleIndexes": {"<-": "@owner._visibleIndexes"},
                    "contentController": {"<-": "@owner.contentController"}
                }
            },
            "flowTranslateComposer": {
                "prototype": "ui/flow.reel/flow-translate-composer",
                "values": {
                    "flow": {"@": "owner"},
                    "invertAxis": true,
                    "allowFloats": true,
                    "minScroll": 0,
                    "maxScroll": {"<-": "@owner.length"},
                    "_momentumDuration": {"<-": "@owner.momentumDuration"},
                    "translateStride": {"<-": "@owner.stride"},
                    "scrollingMode": {"<-": "@owner.scrollingMode"},
                    "linearScrollingVector": {"<-": "@owner.linearScrollingVector"},
                    "isLimitedToSingleStride": {"<-": "@owner.isLimitedToSingleStride"},
                    "delegate": {"<-": "@owner"}
                }
            },
            "slot": {
                "prototype": "ui/slot.reel",
                "values": {
                    "element": {"#": "montage-flow-slot"},
                    "content": {"<->": "@owner.slotContent"}
                }
            },
            "owner": {
                "values": {
                    "element": {
                        "#": "montage-flow"
                    },
                    "_repetition": {
                        "@": "repetition"
                    },
                    "_flowTranslateComposer": {
                        "@": "flowTranslateComposer"
                    },
                    "_cameraElement": {
                        "#": "montage-flow-camera"
                    },
                    "scroll": {"<->": "@flowTranslateComposer.scroll"},
                    "selection": {"<->": "@repetition.contentController.selection"},
                    "selectedIndexes": {"<-": "@repetition.selectedIndexes"},
                    "activeIndexes": {"<-": "@repetition.activeIndexes"},
                    "draggedSlideIndex": {"<-": "@flowTranslateComposer._closerIndex"},
                    "_firstIteration": {"<-": "@repetition._drawnIterations.0"}
                }
            },
            ":iteration": {
               "alias": "@repetition:iteration"
            }
        }
    </script>
</head>
<body>
    <div data-montage-id="montage-flow" class="montage-Flow">
        <div data-montage-id="montage-flow-camera" class="montage-Flow-camera">
            <div data-montage-id="montage-flow-repetition" class="montage-Flow-Repetition">
                <div data-montage-id="wrapper">
                    <div data-param="*"></div>
                </div>
            </div>
            <div data-montage-id="montage-flow-slot" class="montage-Flow-Slot"></div>
        </div>
    </div>
</body>
</html>
